<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <div @click="toggleShow(index)">
          这里是正常显示的部分，通过点击触发隐藏部分显示或隐藏
        </div>
        <div v-show="item.show">
          这里是隐藏的部分
        </div>
      </li>
    </ul>
    <div class="box" v-if="show"></div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: 'status',
    data: function() {
      return {
        list: [{
            id: 1,
            title: '项目一',
            show: false
          },
          {
            id: 2,
            title: '项目二',
            show: false
          },
          {
            id: 3,
            title: '项目三',
            show: false
          }
        ],
        show:false
      }
    },
    created: function() {

    },
    methods: {
      toggleShow(index) {
        this.list[index].show = !this.list[index].show
      }
    }
  }
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
